<template>
	<div class="select-tree" v-clickoutside="outsideClose">
		<el-input 
			ref="selectTreeInput" 
			:value="selectText" 
			placeholder="请输入内容" 
			readonly
			@focus="selectTreeFocus"
			@blur="selectTreeBlur"
		></el-input>



		<div v-show="dropDownVisible" ref="selectTreeDropDown" class="select-tree-drop-down">
			<el-input
				class="drop-down-input"
		  		placeholder="输入关键字进行过滤"
		  		v-model="filterText">
			</el-input>

			<div class="tree-wrap" style="height: 200px;">
				<el-scrollbar style="height: 100%;">
					<el-tree
						  v-if="data.length>0"
					  	class="filter-tree"
					  	:data.sync="data"
					  	:props="props"
					  	default-expand-all
              :node-key="nodeKey"
					  	:expand-on-click-node="expandOnClickNode"
					  	:filter-node-method="filterNode"
              :current-node-key="selectId"
					  	@node-click="treeNodeClick"
					  	ref="inputTree">
					</el-tree>
				</el-scrollbar>	
			</div>	
		</div>
		

	</div>
</template>

<script>
export default{
	props:{
		value:{
			type:[Number,String],
			default:0
		},
    name:{
      type:String,
      default:''
    },
		data:{
			type:Array,
			default:function(){
        return [];
      }
		},
    props:{
      type:Object,
      default:()=>{
        return new Object();
      }
    },
    nodeKey:{
      type:String,
      default:'id'
    },
    nodeName:{
      type:String,
      default:'name'
    },
    //是否在点击节点时展开或者收缩节点，如果是false，则只有点击箭头图标才会
    expandOnClickNode:{
      type:Boolean,
      default:false,
    }
	},
	data(){
		return{
			selectId:'',
			selectText:'正在请求数据字典...',
			dropDownVisible:false,
			filterText: ''
		}
	},
	watch: {
      filterText(val) {

        this.$refs.inputTree.filter(val);
      },
      data(val){
        
      },
      value(newVal,oldVal){
      	this.selectId = newVal;
      },
      name(val){
        this.selectText = val;
      }

    },
    mounted(){
      this.selectId = this.value;
      this.selectText = this.name;
    },
    methods: {
      filterNode(value, data) {
        if (!value) return true;

        console.log("----------filter--------")
        console.log(data)
        console.log(this.nodeName)
        return data[this.nodeName].indexOf(value) !== -1;
      },
      selectTreeFocus(){
      	this.dropDownVisible = true
      },
      selectTreeBlur(){
      	//this.dropDownVisible = false
      },
      treeNodeClick(data,node,$node){
        console.log("-----已选项目-------")
      	console.log(data)
        this.selectText = data[this.nodeName];
        this.selectId = data[this.nodeKey];
        this.outsideClose();
        this.$emit("selected",data);
      },
      outsideClose(){
      	this.dropDownVisible = false;
        //this.filterText = "";
        //this.selectId = '';
        //this.selectText = '正在请求数据字典...';
      }
    },
    directives:{
    	clickoutside:{
    		bind(el,binding,vnode){
    			function documentHandler(e){
    				if(el.contains(e.target)){
    					return false
    				}
    				if(binding.expression){
    					binding.value(e)
    				}
    			}

    			function keyUp(e){
    				if(e.keyCode == 27){
    					if(binding.expression){
    						binding.value(e)
    					}
    				}
    			}

    			el.__vueClickOutSize__ = documentHandler
    			el.__vueKeyup__ = keyUp

    			document.addEventListener('keyup', keyUp)
          		document.addEventListener('click', documentHandler)
    		},
    		unbind(el, binding) {
          		document.removeEventListener('click', el.__vueClickOutSize__)
          		delete  el.__vueClickOutSize__

          		document.removeEventListener('keyup', el.__vueKeyup__)
          		delete  el.__vueKeyup__
        	}
    	}
    }
}
</script>


<style>
.tree-wrap .el-scrollbar__wrap{
  overflow-x: hidden;
}	

</style>


<style scoped>
.select-tree{
	position: relative;

}	

.select-tree-drop-down{
	padding: 4px;
	position: absolute;
	z-index: 999;
	left: 0;
  width: 100%;
	margin-top: 5px;
	background-color: #FFFFFF;
	box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
}

.drop-down-input{
	margin-bottom: 5px;
}
</style>